<template>
  <div class="mainBox">
    <!-- 下拉框查询 -->
    <el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="110px" class="formBox">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="员工姓名" prop="userName">
            <el-input placeholder="员工姓名" v-model="ruleForm.userName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item class="secondRow_formItem">
            <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
            <el-button type="success" @click="add">新增用户</el-button>

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialog">

      <el-dialog :title="title" :visible.sync="centerDialogVisible" width="80%" right>
        <el-form :inline="true" :model="addForm" ref="addForms" :rules="rules" label-width="110px" class="formBox">
          <el-form-item label="员工姓名" prop="userName">
            <el-input placeholder="员工姓名" v-model="addForm.userName"></el-input>
          </el-form-item>

          <el-form-item label="员工电话" prop="userPhone">
            <el-input placeholder="员工电话" v-model="addForm.userPhone"></el-input>
          </el-form-item>
          <el-form-item label="员工住址">
            <el-input placeholder="员工住址" v-model="addForm.userAddress"></el-input>
          </el-form-item>

          <el-form-item label="店长/店员账号" prop="userCount">
            <el-input placeholder="店长/店员账号" v-model="addForm.userCount"></el-input>
          </el-form-item>
          <el-form-item label="店长/店员密码" prop="o">
            <el-input placeholder="店长/店员密码" v-model="addForm.userPassword"></el-input>
          </el-form-item>
          <el-form-item label="所属角色" prop="role">
            <el-select v-model="addForm.role" placeholder="请选择">
              <el-option v-for="item in roles" :key="item.roleName" :label="item.roleName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="所属门店" prop="store">
            <el-select v-model="addForm.store" placeholder="请选择">
              <el-option v-for="item in storeLists" :key="item.storeName" :label="item.storeName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitFormAdduser('addForms')" v-loading="addStoreLoading">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 表格 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width:100%" stripe border v-loading="tableLoading">
        <el-table-column type="index" label="序号" width="80" :index="dealIndex"></el-table-column>
        <el-table-column prop="holder" label="员工姓名" center width="80"></el-table-column>
        <el-table-column prop="phone" label="员工电话" center></el-table-column>
        <el-table-column prop="address" label="员工住址" center show-overflow-tooltip>

        </el-table-column>
        <el-table-column prop="roleValue" label="所属角色" center></el-table-column>
        <el-table-column prop="storeValue" label="所属门店" center></el-table-column>
        <el-table-column prop="userName" label="账号" center></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip=""></el-table-column>
        <el-table-column label="操作" width="168">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="padding:20px 0;text-align:center;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[2, 5, 10, 20, 50]" :page-size="size" layout="total,sizes,prev,pager,next,jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import {
  userList,
  userAdd,
  roleList,
  storeList,
  userDelete,
  userUpdate
} from "@/api/user";
export default {
  data() {
    return {
      roles: [],
      roleId: "",
      title:"",
      addStoreLoading: false,
      storeId: "",
      storeLists: [],
      is_updata: "", //0增加1修改
      user_id: "",
      page: 1,
      tableLoading: true,
      size: 10,
      total: 0,
      ruleForm: {
        userName: ""
      },

      addForm: {
        userName: "",
        userPhone: "",
        userAddress: "",
        role: "",
        store: "",
        userCount: "",
        userPassword: ""
      },
      rules: {
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }],
        store: [{ required: true, message: "请选择门店", trigger: "blur" }],
        userCount: [{ required: true, message: "请输入账号", trigger: "blur" }],
        userPassword: [
          { required: true, message: "请输入密码", trigger: "blur" }
        ]
      },
      user: {
        userName: "",
        userPhone: "",
        userAddress: "",
        userCount: "",
        userPassword: ""
      },
      userDialog: false,
      centerDialogVisible: false,

      tableData: []
    };
  },
  mounted() {
    this.userListGet();
    this.roleList();
    this.storeList();
  },

  methods: {
    //获取用户列表
    userListGet() {
      let that = this;
      userList({ current: this.page, size: this.size })
        .then(res => {
          if (res.code == 200) {
            that.tableData = res.data.records;
            that.total = res.data.total;
            that.tableLoading = false;
          } else {
            that.$message.error(res.msg);
          }

        })
        .catch(res => {
          that.$message.error("服务器错误");
          that.tableLoading = false;
          that.tableData = [];
        });
    },
    //角色列表
    roleList() {
      let that = this;
      roleList().then(res => {
        if (res.code == 200) {
          that.roles = res.data.records;
     
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    //门店列表
    storeList() {
      let that = this;
      storeList().then(res => {
        if (res.code == 200) {
          that.storeLists = res.data.records;
        } else {
          that.$message.error(res.msg);
        }
      });
    },
    //添加员工弹框
    add() {
      this.centerDialogVisible = true;
      this.title="新增"
      this.is_updata = 0;
      this.addForm.userCount = "";
      this.addForm.userPassword = "";
      this.addForm.userPhone = "";
      this.addForm.userName = "";
      this.addForm.role = "";
      this.addForm.store = "";
      this.addForm.userAddress = "";
    },
    submitFormAdduser(formName) {
      let that = this;
      this.addStoreLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.is_updata == 0) {
            let data = {
              userName: this.addForm.userCount,
              userPassword: this.addForm.userPassword,
              phone: this.addForm.userPhone,
              holder: this.addForm.userName,
              roleId: this.addForm.role,
              storeId: this.addForm.store,
              address: this.addForm.userAddress
            };
            userAdd(data).then(res => {
              if (res.code == 200) {
                that.$message.success("添加成功");
                this.addStoreLoading = false;
                that.centerDialogVisible = false;
                that.userListGet();
              } else {
                that.$message.error("添加失败");
                this.addStoreLoading = false;
              }
            });
          }
          if (this.is_updata == 1) {
     
            let data1 = {
              userName: this.addForm.userCount,
              userPassword: this.addForm.userPassword,
              phone: this.addForm.userPhone,
              holder: this.addForm.userName,
              roleId: this.addForm.role,
              storeId: this.addForm.store,
              address: this.addForm.userAddress,
              id: this.user_id
            };
            userUpdate(data1).then(res => {
              if (res.code == 200) {
                that.$message.success("修改成功");
                this.addStoreLoading = false;

                that.centerDialogVisible = false;
                that.userListGet();
              } else {
                that.$message.error("修改失败");
                this.addStoreLoading = false;
              }
            });
          }
        } else {
          this.addStoreLoading = false;

          return false;
        }
      });
    },
    //删除员工
    handleDelete(row) {
      let that = this;
      this.$confirm("确定删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
   
          userDelete({ id: row.id })
            .then(res => {
              if (res.code == 200) {
                that.$message.success("删除成功");
                that.userListGet();
              } else {
                that.$message.error("删除成功");
              }
            })
            .catch(res => {
              that.$message.error("服务器错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    handleSizeChange(val) {
      this.size=val
      this.userListGet();
    },
    handleEdit(row) {
      this.centerDialogVisible = true;

       this.title="修改"
      this.is_updata = 1;
      this.addForm.userCount = row.userName;
      //  this.addForm.userPassword = row.userPassword
      this.addForm.userPhone = row.phone;
      this.addForm.userName = row.holder;
      this.addForm.role = row.roleId;
      this.addForm.store = row.storeId;
      this.user_id = row.id;
      this.addForm.userAddress = row.address;
    },
	   // 处理table连续序号
    dealIndex(index) {
      var self = this;
      return index + 1 + (self.page - 1) * self.size;
    },
    handleCurrentChange(val) {
      this.page=val
      this.userListGet();
    },
    submitForm() {
      let that = this;
      userList({
        current: this.page,
        size: this.size,
        holder: this.ruleForm.userName
      })
        .then(res => {
          if (res.code == 200) {
            that.tableData = res.data.records;
            that.total = res.data.total;
            that.tableLoading = false;
          } else {
            that.$message.error(res.msg);
          }
        })
        .catch(res => {
          that.$message.error("服务器错误");
          that.tableLoading = false;
          that.tableData = [];
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.formBox {
  margin-top: 20px;
}

.tableBox {
  margin: 120px 20px 0 20px;
  .el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    // word-break: break-all;
    line-height: 23px;
  }
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 10px;
}
</style>
